<template>
  <!-- <router-link to="/">Control</router-link> -->
  <div>
    <router-view
      v-if="['登录界面'].indexOf($route.name) > -1"
      :key="routerKey"
    ></router-view>
    <el-row class="tac" v-else>
      <el-col :span="3">
        <el-menu
          :uniqueOpened="true"
          default-active="2-1"
          style="height: 100vh"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="rgb(39 33 35)"
          text-color="#fff"
          active-text-color="#ffd04b"
          :unique-opened="true"
        >
          <el-menu-item index="1">
            <i class="el-icon-s-home"></i>
            <template #title>一刀传世中控系统</template>
          </el-menu-item>

          <el-submenu index="2">

            <template #title>
              <i class="el-icon-menu"></i>
              <span>功能选择</span>
            </template>

            <el-menu-item index="2-1">
              <router-link :to="{ path: '/sbgl', query: { admin: $route.query.admin } }">设备管理</router-link>
            </el-menu-item>

            <el-menu-item index="2-2">
              <router-link :to="{ path: '/zhgl', query: { admin: $route.query.admin } }">账号管理</router-link>
            </el-menu-item>

            <el-menu-item index="2-3">
              <router-link :to="{ path: '/zhhsz', query: { admin: $route.query.admin } }">账号回收站</router-link>
            </el-menu-item>

            <el-menu-item index="2-4">
              <router-link :to="{ path: '/smsj', query: { admin: $route.query.admin } }">实名数据</router-link>
            </el-menu-item>

            <el-menu-item index="2-5">
              <router-link :to="{ path: '/update/password', query: { admin: $route.query.admin }, }">密码修改</router-link>
            </el-menu-item>

            <el-menu-item index="2-6">
              <router-link :to="{ path: '/plsczh', query: { admin: $route.query.admin } }">批量上传账号</router-link>
            </el-menu-item>

            <el-menu-item index="2-7">
              <router-link :to="{ path: '/replace/device', query: { admin: $route.query.admin } }">设备换绑</router-link>
            </el-menu-item>

            <el-menu-item index="2-8" v-if="userInfo.user_key == 1 ">
              <router-link :to="{ path: '/membersUsers', query: { admin: $route.query.admin }, }">后台用户</router-link>
            </el-menu-item>

            <el-menu-item index="2-9" v-if="userInfo.user_key == 1 ">
              <router-link :to="{ path: '/addpoints/logs', query: { admin: $route.query.admin }, }">加点操作记录</router-link>
            </el-menu-item>

            <!--  <el-menu-item index="2-7">
             <router-link :to="{path:'/sbqbd' , query: {admin:$route.query.admin}}">设备区绑定</router-link>
           </el-menu-item> -->

            <!-- <el-menu-item index="2-8">
            <router-link :to="{path:'/djjl' , query: {admin:$route.query.admin}}">点券记录</router-link>
          </el-menu-item>
          -->

            <!--            <el-menu-item index="2-8">-->
            <!--              <router-link-->
            <!--                :to="{ path: '/syjc', query: { admin: $route.query.admin } }"-->
            <!--                >使用教程</router-link-->
            <!--              >-->
            <!--            </el-menu-item>-->

            <!--            <el-menu-item index="2-1">-->
            <!--              <router-link-->
            <!--                :to="{ path: '/kzt', query: { admin: $route.query.admin } }"-->
            <!--                >控制台</router-link-->
            <!--              >-->
            <!--            </el-menu-item>-->



          </el-submenu>
        </el-menu>
      </el-col>
      <!-- <el-col :span="1">
      </el-col> -->
      <el-col :span="21" class="container">
        <div class="top-info">
          <div>
            <span @click="refreshScope">
              局部刷新<i class="vxe-icon--refresh" style="margin-right: 20px" />
            </span>
            <span @click="refreshGlobel">
              全局刷新<i class="vxe-icon--refresh" />
            </span>
          </div>
          <div>
            <vxe-button :content="userInfo.username">
              <template #dropdowns>
                <vxe-button
                  type="text"
                  content="退出"
                  @click="loginOut"
                ></vxe-button>
              </template>
            </vxe-button>
          </div>
        </div>
        <router-view :key="refrshKey"></router-view>
        <!--        <router-view></router-view>-->
      </el-col>
    </el-row>
  </div>
</template>

<script>

import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'

export default {
  name: "App",
  data() {
    return {
      userName: this.$store.state.userInfo,
      refrshKey: 0,
    };
  },
  components: {
    // HelloWorld,
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    refreshGlobel() {
      location.reload();
    },
    refreshScope() {
      this.refrshKey++;
    },
    loginOut() {
      localStorage.clear();
      this.$router.push("/login");
    },
  },
  mounted() {
    // this.userName = localStorage.getItem("userName");
  },
  computed: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
     ...mapGetters(["userInfo"]),
  },
};
</script>

<style>
.container {
  height: 100vh;
  overflow-y: auto;
  padding-bottom: 20px;
}
.top-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px 20px;
  padding-right: 8px;
  margin-bottom: 10px;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 0px;
}

#app a {
  font-weight: bold;
  color: #ffffff;
  text-decoration: none;
}

#app a.router-link-exact-active {
  color: #42b983;
}
.vxe-checkbox--icon {
  font-size: 20px !important;
}
.el-checkbox {
  --el-checkbox-input-height: 20px !important;
  --el-checkbox-input-width: 20px !important;
  --el-checkbox-font-size: 22px !important;
}
.el-checkbox__inner::after {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  content: "";
  border: 1px solid var(--el-checkbox-checked-icon-color);
  border-left: 0;
  border-top: 0;
  height: 7px;
  left: 8px !important;
  position: absolute;
  top: 5px !important;
}
.vxe-table--body-wrapper {
  font-family: "微软雅黑";
  font-size: 13px !important;
}
</style>
